import React, { useEffect, useState } from "react";
import styles from "./index.module.css";
import { menuList } from "./menuList";
import { MenuItem_TYPE } from "./type";
import classnames from "classnames";
function CneterThreejs() {
  // 响应式数据 ：textActive 文本是否高亮 active 图片高亮 isActive 是否执行暂停动画
  const [textActive, setTextActive] = useState<string>("");
  const [imgActive, setImgActive] = useState<string>("");
  const [isActive, setIsActive] = useState<boolean>(false);

  // 鼠标进入触发
  const mousemove = (val: string) => {
    setImgActive(val);
    setIsActive(true);
    setTextActive(val);
  };

  // 鼠标移出触发
  const mouseleave = () => {
    setImgActive("");
    setIsActive(false);
    setTextActive("");
  };

  // 点击旋转盒子时触发
  const tabFun = (item: MenuItem_TYPE) => {
    alert(`您点击了${item.title}`);
  };

  // 延迟动画加载
  const delayLoadFun = () => {
    const items: any = document.querySelectorAll(".ball");
    for (let i = 0; i < items.length; i++) {
      items[i].style["animation-delay"] =
        -5 - 3.3 * i + "s," + -3.3 * i + "s," + -3.3 * i + "s";
    }
  };

  useEffect(() => {
    // 延迟动画加载
    delayLoadFun();
  }, []);

  // 渲染页面动画
  const animationFun = () => {
    return menuList.map((item: any) => {
      return (
        <div
          className={`ball ${styles.ball}`}
          id={classnames({ [styles.stop]: isActive })}
          key={item.uid}
          onMouseMove={() => mousemove(item.title)}
          onMouseLeave={() => mouseleave()}
          onClick={() => tabFun(item)}
        >
          <img
            src={imgActive === item.title ? item.checkImage : item.image}
            alt=""
            className={styles.img}
          />
          <p
            className={classnames({
              [styles.title]: textActive === item.title,
            })}
          >
            {item.title}
          </p>
        </div>
      );
    });
  };

  return <div className={styles.container}>{animationFun()}</div>;
}

export default CneterThreejs;
